<template>
	<div>q
		<div class="head">
			<div class="shang">
				<router-link to="/">
					<img src="../assets/jtl.png" alt="">
				</router-link>
				<span class="akl">德玛西亚</span>
			</div>
			<div class="xia">
				<div @click="fl()">
					<span>准时达</span>
					<p></p>
				</div>
				<div @click="px()">
					<span>排序</span>
					<p></p>
				</div>
				<div @click="sx()">
					<span>筛选</span>
						<p></p>
				</div>
			</div>
		</div>
		
		<Fenlei v-show="flag==1"></Fenlei>
        
		<Paixu v-show="flag==2"></Paixu>
		
		<Shaixuan v-show="flag==3"></Shaixuan>
	</div>

</template>

<script>
	import Fenlei from "../components/fenlei";
     import Paixu from "../components/paixu"
    import Shaixuan from "../components/shaixuan";

	export default {
		name: "xiangqing",
		data:function(){
			return{
				flag:''
			}
		},
		components: {
			Fenlei,
			Paixu,
			Shaixuan,
		},
		methods:{
			fl:function(){
				// alert(1)
				this.flag = 1
				// window.console.log(e.currentTarget)
			},
			px:function(){
				this.flag = 2
			},
			sx:function(){
				this.flag = 3
			}
			
		}
	}
</script>

<style scoped>
	.head{
		/* display: none; */
	}
	.shang {
		background-color: #3190e8;
		position: fixed;
		z-index: 100;
		left: 0;
		top: 0;
		width: 100%;
		height: 3rem;
		/* display: none; */
	}

	.shang img {
		position: absolute;
		top: 0;
		left: 0;
		width: 3rem;
	}

	.akl {
		width: 6rem;
		position: absolute;
		top: 0.5rem;
		left: 40%;
		color: white;
		font-size: 1.5rem;
		text-align: center;
	}

	.xia {
		height: 2.2rem;
		border-bottom: .025rem solid #f1f1f1;
		position: fixed;
		top: 3rem;
		right: 0;
		width: 100%;
		display: flex;
		box-sizing: border-box;
		background: white;
		z-index: 1;
	}

	.xia div {
		width: 33.33%;
		text-align: center;
		height: 1rem;
		line-height: 1.3rem;
		margin-top: 0.5rem;
		border-right: .025rem solid rgba(0, 0, 0, 0.1);
	}

	.xia div span {
		font-size: 0.8rem;
		color: #333;
		font-weight: 400;
	}

	.xia div p {
		display: inline-block;
		margin-left: 0.2rem;
		width: 0;
		height: 0;
		border-right: 10px solid transparent;
		border-left: 10px solid transparent;
		border-top: 10px solid black;
	}
	.wh,.xm,.ch{
		display: none;
	}
</style>
